<template>
  <!-- 运营报表组件 -->
  <div>
    <gongyong @serchClick="serchClick" ref="gongyong" :gongyongOption="gongyongOption">
      <template #top-left>
        <div class="block">

          <span class="date-text" style="margin-left: 15px">日期筛选</span>
          <el-select v-model="dateBin" @change="selectChange" size="mini" style="width: 10%" :disabled="seltdisab">
            <el-option v-for="item in dateOptions" :key="item.id" :label="item.label" :value="item.value" :disabled="item.disabled">
            </el-option>
          </el-select>

          <span class="demonstration" style="margin-left:46px;">日期：</span>
          <el-date-picker style="width: 15%" v-model="dateVal" :type="dateType" size="mini" placeholder="选择日期" @change="dateChange" :value-format="valFrom">
          </el-date-picker>
          <!-- 报表下拉 -->
          <!-- <statementSelect
            style="width: 15%"
            :tableColumn="tableColumn"
            @staChange="staChange"
            :dateBin="dateBin"
          ></statementSelect> -->
        </div>
      </template>

      <!-- 下边的Table组件 -->
      <template #bottom>
        <MyTable :dataList="tableColumn" :devTable="consume" :tableStyle="tableStyle" v-loading="loading" :judegtable="judegtable">
        </MyTable>
      </template>
    </gongyong>
  </div>
</template>

<script>
import gongyong from "../layout/gongyong.vue"; // 共用模板
import MyTable from "./components/MyTable.vue";
import statementSelect from "./components/statementSelect.vue";
// import { getConsume } from "@/api/operationAnalysis/waterAnalysis/waterOperation";

// :devTable="" table表格需要的列表数据
export default {
  components: {
    gongyong,
    MyTable,
    statementSelect,
  },
  props: {
    exportQuerylist: {
      type: Object,
    },
    datalist: {
      type: Array,
    },
    judegtable: {
      type: Number,
      default: 1,
    },
    activeName: {
      type: String,
    }
  },
  // props: [
  //   'exportQuerylist'
  // ],
  data () {
    return {
      dateVal: new Date(),
      dateBin: 0,
      tableColumn: [
        {
          name: "时间",
          prop: "displayTime",
          type: "",
          id: 1,
        },
        {
          name: "出水压力(Mpa)",
          prop: "das",
          type: "",
          id: 2,
          hm: "(Mpa)",
        },
      ], //表头配置

      tabdata: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],

      gongyongOption: {
        top: true,
        center: false,
        bottom: true,
        reset: false,
      },
      tableStyle: {
        TableHight: "650",
      }, // table 表格组件高度
      // 共用组件配置
      suoS: {
        properties:
          "outflow_total,electric_quantity,dose,power_per_ton,drug_per_ton", // 传入需要显示的列
        searchTime: "2022-03-14", //  查询时间
        timeType: 0, // 日期类型
        monitorPointId: "", // 监测点ID
      }, // 查询条件
      dateOptions: [
        {
          value: 0,
          label: "日",
        },
        {
          value: 1,
          label: "月",
        },
        {
          value: 2,
          label: "年",
        },
      ], // 日期下拉绑定

      // dataList: [
      //   {
      //     prop: "displayTime",
      //     label: "时间",
      //     id: 0,
      //   },
      //   {
      //     prop: "outflowTotal",
      //     label: "供水量(㎡)",
      //     id: 1,
      //   },
      //   {
      //     prop: "electricQuantity",
      //     label: "电耗(KWh)",
      //     id: 2,
      //   },
      //   {
      //     prop: "electricQuantity",
      //     label: "药耗(Kg)",
      //     id: 3,
      //   },
      //   {
      //     prop: "powerPerTon",
      //     label: "吨水电耗(KWh/吨)",
      //     id: 4,
      //   },
      //   {
      //     prop: "dose",
      //     label: "吨水药耗(Kg/吨)",
      //     id: 5,
      //   },
      // ],
      // dataList: [], // 存放请求配置表头
      consume: [], // 存放消耗列表数据
      loading: true,
      valFrom: "yyyy-MM-dd",
      dateType: "date", // 时间类型
      seltdisab: false,
      staVal: "yali",
      exportParams: {},
    };
  },
  watch: {
    exportQuerylist: {
      handler (val) {
        this.exportParams = val
      },
      deep: true,
    },
    dateVal: {
      handler (newVal) {
        if (newVal == null) {
          this.seltdisab = true;
        } else {
          this.seltdisab = false;
        }
      },
      deep: true,
    },
    datalist: {
      handler (newVal) {
        this.consume = newVal;
        if (this.consume != "") {
          this.loading = false;
        }
      },
    },
    judegtable (newVal) {
      this.selectChange(this.suoS.timeType);
    },
  },
  created () { },
  mounted () {
    this.suoS.monitorPointId = this.$parent.$parent.$parent.nodeData.id; // 检测点Id
    if (this.suoS.monitorPointId || this.$parent.$parent.$parent.nodeData.id) {
      this.$refs.gongyong.serchClick(); // 调用一次公共组件搜索按钮
    } else {
      setTimeout(() => {
        this.$refs.gongyong.serchClick();
      }, 1000);
    }
  },
  methods: {
    // 日期选择
    dateChange (value) {
      this.dateVal = value
      this.suoS.searchTime = value;
      this.$emit("getdate", value);
    },

    newdata () {
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        undefined;
        month = "0" + month;
      }
      if (day < 10) {
        undefined;
        day == "0" + day;
      }
      this.dateVal = year += "-" + month + "-" + day;
    },

    // 时间选择下拉
    selectChange (label) {
      if (!this.dateVal) {
        return this.$message.error("请输入查询时间");
      }
      this.suoS.timeType = label;
      this.$emit("getdmy", label);
      if (label === 0) {
        this.dateType = "date";
        this.valFrom = "yyyy-MM-dd";
        this.newdata();
        this.suoS.searchTime = this.dateVal;
        if (this.judegtable === 3) {
          this.tableColumn = [
            {
              name: "本次上报时间",
              prop: "displayTime",
              type: "",
              id: 0,
            },
            {
              name: "上次上报时间",
              prop: "displayTime",
              type: "",
              id: 0,
            },
            {
              name: "本次读数",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "上次读数",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "累计用量",
              prop: "displayTime",
              type: "",
              id: 1,
            },

          ];
        } else if (this.judegtable === 1) {
          this.tableColumn = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "压力(Mpa)",
              prop: "das",
              type: "",
              id: 2,
            },
          ];
        } else if (this.judegtable === 2) {
          this.tableColumn = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "流量",
              prop: "das",
              type: "",
              id: 2,
            },
          ];
        } else {
          this.tableColumn = [
            {
              name: "时间",
              prop: "",
              type: "",
              id: 1,
              
            },
            {
              name: "平均值",
              prop: "",
              type: "",
              id: 2,
            },
            {
              name: "最大值",
              prop: "",
              type: "",
              id: 3,
            },
            {
              name: "最小值",
              prop: "",
              type: "",
              id: 4,
            },
          ];
        }
      } else if (label === 1) {
        this.newdata();
        this.dateType = "month";
        this.valFrom = "yyyy-MM";
        this.suoS.searchTime = this.dateVal.substring(0, 7);
        if (this.judegtable === 6) {
          this.tableColumn = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "累计用量",
              prop: "das",
              type: "",
              id: 2,
            },
          ];
        } else if (this.judegtable === 1 || this.judegtable === 2) {
          this.tableColumn = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "压力(Mpa)",
              prop: "das",
              type: "",
              id: 2,
            },
          ];
        } else {
          this.tableColumn = [
            {
              name: "时间",
              prop: "",
              type: "",
              id: 1,
            },
            {
              name: "平均值",
              prop: "",
              type: "",
              id: 2,
            },
            {
              name: "最大值",
              prop: "",
              type: "",
              id: 3,
            },
            {
              name: "最小值",
              prop: "",
              type: "",
              id: 4,
            },
          ];
        }
      } else if (label === 2) {
        this.newdata();
        this.dateType = "year";
        this.valFrom = "yyyy";
        this.suoS.searchTime = this.dateVal.substring(0, 4);
        if (this.judegtable === 9) {
          this.tableColumn = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "累计水量",
              prop: "das",
              type: "",
              id: 2,
            },
          ];
        } else if (this.judegtable === 1 || this.judegtable === 2) {
          this.tableColumn = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "压力(Mpa)",
              prop: "das",
              type: "",
              id: 2,
            },
          ];
        } else {
          this.tableColumn = [
            {
              name: "时间",
              prop: "",
              type: "",
              id: 1,
            },
            {
              name: "平均值",
              prop: "",
              type: "",
              id: 2,
            },
            {
              name: "最大值",
              prop: "",
              type: "",
              id: 3,
            },
            {
              name: "最小值",
              prop: "",
              type: "",
              id: 4,
            },
          ];
        }
      }
    },

    // 处理年月表头
    disposeDateHader (haderList) {
      let newhaderList = [...haderList];

      haderList.forEach((item) => {
        if (item.hm) {
          newhaderList = [
            {
              name: "时间",
              prop: "displayTime",
              type: "",
              id: 0,
            },
            {
              name: "平均值" + item.hm,
              prop: "displayTime",
              type: "",
              id: 1,
            },
            {
              name: "最大值" + item.hm,
              prop: "das",
              type: "",
              id: 2,
            },
            {
              name: "最小值" + item.hm,
              prop: "das",
              type: "",
              id: 3,
            },
          ];
        } else {
        }

        if (item.children) {
          if (item.hm) {
            item.children = [
              {
                name: "平均值" + item.hm,
                prop: "displayTime",
                type: "",
                id: 1,
              },
              {
                name: "最大值" + item.hm,
                prop: "das",
                type: "",
                id: 2,
              },
              {
                name: "最小值" + item.hm,
                prop: "das",
                type: "",
                id: 3,
              },
            ];
          }
        }
      });
      this.tableColumn = newhaderList;
    },

    // 报表下拉
    staChange (data) {
      this.tableColumn = data.staTble;
      this.staVal = data.staVal;
    },
    // 点击搜索按钮
    async serchClick () {
      if (!this.suoS.searchTime) {
        this.$message.error("请选择查询时间");
        return;
      }
    },

    // // 点击重置按钮
    // resetClick() {},
  },
};
</script>

<style lang="scss" scoped>
</style>
